<template>
  <div class="major-dialog" @click.stop>
    <div class="left">
      <div
        :class="['left-item', currentType === item.value ? 'active' : '']"
        v-for="item in typeList"
        :key="item.value"
        @click="handleChangeType(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right">
      <div class="main-content" ref="mainContentRef">
        <keep-alive>
          <component
            :is="currentType === 1 ? Major : Industry"
            @confirmMajor="handleConfirmMajor"
            @confirmIndustry="handleConfirmIndustry"
          />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Major from './Major.vue';
import Industry from './Industry.vue';

const props = defineProps({});

const emit = defineEmits(['confirmMajor', 'confirmIndustry']);

const currentType = ref(1);

const typeList = ref([
  {
    name: '按专业',
    value: 1
  },
  {
    name: '按产业',
    value: 2
  }
]);

const handleChangeType = (item) => {
  currentType.value = item.value;
};

const handleConfirmMajor = (data) => {
  emit('confirmMajor', data);
};

const handleConfirmIndustry = (data) => {
  emit('confirmIndustry', data);
};
</script>

<style scoped lang="scss">
.major-dialog {
  position: absolute;
  top: 60px;
  left: 0;
  width: 60vw;
  height: 520px;
  z-index: 99;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  box-shadow: 0px 2px 28px 6px rgba(90, 122, 162, 0.3);
  overflow: hidden;
  .left {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid #e7e7e7;
    .left-item {
      padding: 20px 40px;
      font-size: 24px;
      color: #666666;
      &.active {
        font-weight: bold;
        color: $primary-color;
        background: #f6fafe;
      }
    }
  }
  .right {
    flex: 1;
    height: 100%;
    position: relative;
    .main-content {
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
}
</style>
